<template>
	<view class="main-cont">
		<u-input v-model="value" type="textarea" :border="false" :height="height" placeholder="写点什么..." maxlength="2500"
			:custom-style="customStyle" :auto-height="false" />
		<view class="images box box-align-start mt10">
			<view class="item mr10" v-for="(ite,i) in imgurl" :key="i" @click="previewImage(imgurl,i)">
				<u-image :src="ite.fileSuffix =='mp4'?ite.tempurl:ite.url" width="186rpx" height="186rpx">
					<u-loading slot="loading"></u-loading>
				</u-image>
				<u-image src="@/static/home/icon_play.png" width="40rpx" height="40rpx" class="posa"
					v-if="ite.fileSuffix =='mp4'">
					<u-loading slot="loading"></u-loading>
				</u-image>
				<view class="delete box box-align-center box-pack-center" @click.stop="handleDelete(i)">
					<u-icon name="close" color="#fff"></u-icon>
				</view>
				<!-- <video :src="ite.videoUrl" class="my-Video" width="152rpx" height="152rpx" v-if="ite.type == 'mp4'"></video> -->
			</view>
		</view>
		<view class="box box box-align-center box-pack-start mt20 padd20">
			<view class="box box-tb box-align-center box-pack-center" @click="addImg">
				<u-image src="@/static/class/icon_img.png" width="33rpx" height="33rpx"></u-image>
				<view class="">
					图片
				</view>
			</view>
			<view class="ml89 box box-align-center box-pack-center box-tb" @click="addVideo">
				<u-image src="@/static/class/icon_video.png" width="33rpx" height="33rpx"></u-image>
				<view class="">
					视频
				</view>
			</view>
		</view>
		<view class="fixed box box-align-center box-pack-center" @click="disabled !=false?chkWords():''">
			<view class="btn">
				分 享
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				height: 400,
				customStyle: {
					backgroundColor: "#F8F9FC",
					padding: "20rpx"
				},
				imgurl: [
					// {
					// 	url: "https://heroes.nosdn.127.net/a/images/2020/7/28/ed8237653d64482cbe6608839fac0182.jpg",
					// 	type: "jpg"
					// },
					// {
					// 	url: "https://heroes.nosdn.127.net/a/images/2020/7/28/ed8237653d64482cbe6608839fac0182.jpg",
					// 	videoUrl: "https://yhykt.oss-cn-beijing.aliyuncs.com/8CFE70CB7515450486CB7A27B130E362%E6%9C%A8%E5%AD%90%E7%9A%84%E5%BD%B1%E5%83%8F%E5%A3%B0%E8%89%B2-%E5%9B%9E%E5%BF%86%E5%90%91%E3%80%8A%E9%BB%91%E6%9A%97%E9%AA%91%E5%A3%AB%E3%80%8B%E5%B8%8C%E6%96%AF%E8%8E%B1%E6%9D%B0%E5%B0%8F%E4%B8%91%E5%89%AA%E8%BE%91%28%E8%B6%85%E6%B8%85%29.mp4?Expires=4771463162&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=JvtEQHPBceB7iZcGBIj8Y6B8kTE%3D",
					// 	type: "mp4"
					// }
				],
				src: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
				clazz: uni.getStorageSync('clazz'),
				user: uni.getStorageSync('user'),
				roles: uni.getStorageSync('roles'),
				files: {
					files: []
				},
				disabled: true,
				imgCnt: 6,
				videoCnt: 3
			}
		},
		onLoad(opt) {
			console.log(this.user, this.roles);
			console.log(this.roles.indexOf("team") != -1);
		},
		methods: {
			chkWords() {
				this.disabled = false;
				this.$api.post({
					url: '/comm/chkWords',
					method: 'post'
				}, {
					cont: this.value
				}).then(res => {
					if (res.risky == true) {
						this.$refs.uTips.show({
							title: '检测到违规内容，请重新编辑！',
							type: 'warning',
							duration: '2500'
						});
						this.value = "";
					} else {
						this.share();
					}
				})
			},
			share() {
				this.files.files = this.imgurl;
				if (this.value != '') {
					let url;
					let params;
					if (this.roles.indexOf("team") != -1) {
						url = '/ybjq/adminshare';
						params = {
							schoolid: this.user.schoolId,
							userid: this.user.id,
							title: this.value,
							files: JSON.stringify(this.files)
						};
					} else {
						url = '/ybjq/share';
						params = {
							classid: this.clazz.id,
							userid: this.user.id,
							title: this.value,
							files: JSON.stringify(this.files)
						};
					};
					this.$api.post({
						url: url,
						method: 'post'
					}, params).then(res => {
						if (res.code == 0) {
							this.$refs.uToast.show({
								title: '分享成功',
								type: 'success',
								duration: '1500'
							})
							setTimeout(() => {
								// this.totrhome();
								uni.navigateBack()
							}, 1500);
						}
					})
				} else {
					this.disabled = true;
					this.$refs.uToast.show({
						title: '内容不能为空',
						type: 'warning',
						duration: '1000'
					})
				}
			},
			totrhome() {
				uni.reLaunch({
					url: '/pages/home/home'
				})
			},
			previewImage(val, i) {
				if (val[i].fileSuffix == `mp4`) {
					uni.navigateTo({
						url: `/pageHome/video?url=` + val[i].url
					})
				} else {
					let it = JSON.stringify(val)
					uni.setStorage({
						key: 'item',
						data: it
					})
					uni.navigateTo({
						url: `/pageHome/showFile?index=` + i + `&val=` + encodeURIComponent(it)
					})
				}
			},
			addImg() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						console.log(res);
						this.uploadfiles(res.tempFilePaths);
						// let str = String(res.tempFilePaths)
						// let item = {
						// 	url:str,
						// 	type:str.substring(str.lastIndexOf(".")+1)
						// }
						// this.imgurl.push(item)
						// console.log(JSON.stringify(res.tempFilePaths));
					},
					fail:res =>  {
						console.log(res);
					}
				});
			},
			//多文件上传
			uploadfiles(file) {
				uni.showLoading({
					title: '上传中'
				})
				var _this = this;
				const tempFilePaths = file;
				//循环遍历传入，达到一次性上传多张的效果
				for (let i = 0; i < tempFilePaths.length; i++) {
					uni.uploadFile({
						// 后端api接口
						url: _this.$api.baseUrl + '/upload/uploadfile',
						// uni.chooseImage函数调用后获取的本地文件路劲
						filePath: tempFilePaths[i],
						name: 'file', //后端通过'file'获取上传的文件对象
						success: (uploadFileRes) => {
							uni.hideLoading()
							const resdata = JSON.parse(uploadFileRes.data);
							console.log(resdata);
							let item = {
								fromtype: 'temp',
								url: resdata.body.data.url,
								fileSuffix: 'jpg',
								fileid: resdata.body.data.fileid
							}
							_this.imgurl.push(item);
						}
					})
				}
			},
			//上传多个视频
			uploadvideofile(file, tempFilePath) {
				uni.showLoading({
					title: '上传中'
				})
				var _this = this;
				uni.uploadFile({
					url: _this.$api.baseUrl + '/upload/uploadfile',
					filePath: file,
					name: 'file',
					success: (uploadFileRes) => {
						uni.hideLoading()
						const resdata = JSON.parse(uploadFileRes.data);
						console.log(resdata);
						let item = {
							fromtype: 'temp',
							tempurl: tempFilePath, //临时封面地址
							url: resdata.body.data.firstframe, //封面地址
							fileSuffix: 'mp4',
							videoUrl: resdata.body.data.url, //视频地址
							fileid: resdata.body.data.fileid
						}
						// setTimeout(res=>{
						_this.imgurl.push(item);
						// },2000)
					}
				});
			},
			upload_images() {
				let that = this;
				//这里是限制上传的图片张数
				//that.insert.images是代码的数据结构，需换成自己的数据结构
				if (that.insert.images.length >= 5) {
					uni.showToast({
						title: `最多只能上传${that.insert.images.length}张图片`,
						icon: 'none',
						mask: true,
						duration: 1500
					})
				} else {
					uni.chooseImage({
						count: 5, //默认9【一次性可以选择几张，范围1~9】
						//可以指定是原图还是压缩图，默认二者都有
						sizeType: ['original', 'compressed'],
						sourceType: ['album'], //从相册选择
						success: (res) => {
							const tempFilePaths = res.tempFilePaths;
							//循环遍历传入，达到一次性上传多张的效果
							for (let i = 0; i < tempFilePaths.length; i++) {
								uni.uploadFile({
									// 后端api接口
									url: 'https://xxxxx',
									// uni.chooseImage函数调用后获取的本地文件路劲
									filePath: tempFilePaths[i],
									name: 'file', //后端通过'file'获取上传的文件对象
									//这里是请求头需要携带的token数据
									// getStorageSync获取本地缓存的token
									// header: {
									// 	token: uni.getStorageSync('token'),
									// },
									success: (uploadFileRes) => {
										let imgRes = JSON.parse(uploadFileRes.data);
										console.log(imgRes);
										if (imgRes.code == 0) {
											uni.showToast({
												title: imgRes.msg,
												icon: 'error',
												duration: 2000
											});
											return;
										}
									}
								})
							}
						}
					});
				}
			},
			addVideo() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image', 'video'],
					sourceType: ['album', 'camera'],
					camera: 'back',
					success: res => {
						console.log(res)
						this.uploadvideofile(res.tempFiles[0].tempFilePath, res.tempFiles[0]
							.thumbTempFilePath);
					}
				})
			},
			handleDelete(i) {
				this.imgurl.splice(i, 1)
			}

		}
	}
</script>

<style scoped lang="scss">
	.ml89 {
		margin-left: 89rpx;
	}

	.main-cont {
		box-sizing: border-box;
		padding: 26rpx 39rpx 200rpx 26rpx;
		width: 100%;
		height: 100%;
		background-color: #fff;

		.images {
			flex-wrap: wrap;
			margin-left: 36rpx;

			.item {
				position: relative;
				margin-bottom: 20rpx;

				.posa {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.delete {
					width: 40rpx;
					height: 40rpx;
					background-color: rgba(0, 0, 0, .3);
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}

		.fixed {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 200rpx;
			background-color: rgba(255, 255, 255, .9);

			.btn {
				width: 466rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient(180deg, #7686F6, #626BF1);
				box-shadow: 0px 2rpx 10rpx 0px #DADCE8;
				border-radius: 31rpx;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
			}
		}
	}
</style>
